<template>
    <c-dialog title="模态框名字" v-model="showDeaile" width="90%">
      <c-forms :model="dialogFormData" :rules="dialogRules" ref="dialogForm">
        <c-formitems :form-data="dialogFormData" v-for="item in dialogFormItems" :key="item.value" :config="item"></c-formitems>
      </c-forms>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogCancel">取 消</el-button>
          <el-button type="primary" @click="dialogOk">确 定</el-button>
        </span>
      </template>
    </c-dialog>
  </template>
  <script setup>
  import { reactive, ref, defineProps, defineEmit, useContext, computed } from 'vue'
  import { JSONCopy } from '@components/js/utile.js'
  const { expose } = useContext()
  let props = defineProps({
    showDeaile: {
      type: Boolean,
      default: false,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  })
  const emit = defineEmit(['updata', 'close'])
  // let disabled = ref(false)
  let dialogFormData = reactive({
    {{ each formlist }}
    {{$value.value}}: '',
    {{ /each }}
  })
  let dialogFormItems = computed(() => {
    return [
        {{ each formlist }}
        {{$value}},
        {{ /each }}
    ]
  })
  let dialogRules = reactive({})
  let dialogForm = ref(null)
  function dialogOk() {
    dialogForm.value
      .validate()
      .then(() => {
        emit('updata', JSONCopy(dialogFormData))
        dialogCancel()
      })
      .catch(() => {
        console.log('不通过')
      })
  }
  function dialogCancel() {
    dialogForm.value.resetFields()
    //   disabled.value = false
    emit('close')
  }
  function setDialogForm(data, isDisabled) {
    //   disabled.value = isDisabled
    Object.assign(dialogFormData, data)
  }
  expose({ setDialogForm })
  </script>